import React, { Component } from 'react';
import DemoState from './01.定义状态';//状态
import DemoEventFn from './02.事件处理-更改this指向';//事件处理-更改this指向
import DemoForm from './03.受控与非受控组件';
import DemoComment from './04.案例-发表评论';
import './css.css'
class Demo extends Component {
  constructor () {
    super()
    this.state = {
      like:'睡觉',
      count: 0
    }
  }
  
  // 修改爱好
  changeLike(){
    // this-undefined
    this.setState({
      like:'喜欢睡大觉'
    })
  }

  // coint++
  // add(num){
  //   console.log(123123);
  //   this.setState({
  //     count:this.state.count+num
  //   })
  // }

  // 箭头函数
  add=(num)=>{
    this.setState({
          count:this.state.count+num
        })
  }

  render() { 
    return ( 
      <>
        <h2>案例（知识点）</h2>
        <DemoState/>
        <DemoEventFn/>
        <DemoForm/>
        <DemoComment/>
        <p>{this.state.like}</p>
        <button onClick={this.changeLike.bind(this)}>点击修改爱好</button>
        <p>count++{this.state.count}</p>
        {/* <button onClick={this.add.bind(this,5)}>点击count++</button> */}
        <button onClick={()=>this.add(5)}>点击count++</button>
      </>
     );
  }
}
 
export default Demo;